<!DOCTYPE html>
<html>
	<head xmlns:th="http://www.thymeleaf.org" >
		<meta charset="utf-8">
		<base href="/">
		<title>搜索</title>
		<link href="/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="../static/css/site.css" 
			th:href="@{/css/site.css}"/>
		<link rel="stylesheet" type="text/css" href="../static/css/search.css"
			th:href="@{/css/search.css}"/>
		<link href="/lib/layui-v2.6.3/css/layui.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link href="/css/style.min.css" rel="stylesheet">
	</head>
	<style>
		.goods>ul>li {
			width: 285px;
		}
	</style>
	<body>
		<div th:replace="frag::header" id="header"></div>

		<!-- 查询区域 -->
		<div class="main">
			<div class="crumbs">
				<div class="container">
					<a href="">首页</a>
					>
					<a href="">全部结果</a>
					>
					<a href="">手机</a>
				</div>
			</div>
			<div class="sort">
				<div class="container">
					<ul class="clear first-sort">
						<span class="label">一级分类:</span>
						<li class="active"><a href="">全部</a></li>
						<li><a href="">红米手机</a></li>
						<li><a href="">小米手机</a></li>
						<li><a href="">黑鲨手机</a></li>
					</ul>
					<ul class="clear second-sort">
						<span class="label">二级分类:</span>
						<li class="active"><a href="">全部</a></li>
						<li><a href="">红米手机</a></li>
						<li><a href="">小米手机</a></li>
						<li><a href="">黑鲨手机</a></li>
					</ul>
				</div>
			</div>
			<div class="order">
				<div class="container">
					<ul class="clear">
						<li class="active"><a href="">综合</a></li>
						<li><a href="">新品</a></li>
						<li><a href="">销量</a></li>
						<li><a href="">价格</a></li>
					</ul>
				</div>
			</div>
			<div class="goods container">
				<ul class="clear">
					<li th:each="goods,status:${goodsList.list}" th:classappend="${status.count % 4 == 0} ? 'r' : '' " >
						<a href="goods.html" th:href="@{'/goods/'+${goods.id}}" >
							<div class="img">
								<img th:src="@{'/upload/' + ${goods.picList[0].url} }" >
							</div>
							<h2 class="desc" th:text="${goods.name+'&nbsp'+goods.color+'&nbsp'+goods.version}" ></h2>
							<p class="price" th:text="${goods.markPrice}" ></p>
							<div class="thumbs">
								<ul class="clear">
									<li th:each="pic:${goods.picList}" ><img th:src="@{'/upload/'+${pic.url}}" ></li>
								</ul>
							</div>
							<div class="flags">
								<span>赠</span>
								<span>加价购</span>
							</div>
						</a>

				</ul>
				<!-- 表格 -->
				<div id='novel_table'></div>
				<!-- 表格结束 -->

			</div>
		</div>
		
		<!-- 底部 -->
		<div th:replace="frag::footer" id="footer"></div>
		
		<!-- 引入jQuery -->
		<script type="text/javascript" src="../static/js/jquery-2.1.4.js" th:src="@{/js/jquery-2.1.4.js}"></script>
		<script src="/lib/layui-v2.6.3/layui.js"></script>
		<script type="text/javascript" src="/js/jquery.min.js"></script>
		<script type="text/javascript" src="/js/bootstrap.min.js"></script>
		<script src="/js/bootstrap-notify.min.js"></script>
		<script type="text/javascript" src="/js/template-web.js"></script>
		<script type="text/javascript" src="/js/lightyear.js"></script>
		<script type="text/javascript" src="/js/bootstrapValidator.js"></script>
		<!-- 引入search.js -->
		<script type="text/javascript" src="../static/js/search.js" th:src="@{/js/search.js}"></script>
		<script th:if="false">
			// 动态页面需要去掉
			$("#header").load("header.html");
			$("#footer").load("footer.html");
		</script>
		<!--对话框-->
		<script type="text/html" id="all_novel" th:inline="javascript">
			<!--主要表格结束-->
			<!--分页-->
			<nav class="text-center">
				<ul class="pagination pagination-circle">
					{{if data.hasPreviousPage}}
					<li><a href="javascript:void(0);" onclick="findAll('{{data.pageNum-1}}')" ><span><i class="mdi mdi-chevron-left"></i></span></a></li>
					{{else}}
					<li class="disabled"><a href="javascript:void(0);"><span><i class="mdi mdi-chevron-left"></i></span></a></li>
					{{/if}}
					{{each data.navigatepageNums}}
					{{if $value==data.pageNum}}
					<li class="active"><a href="javascript:void(0);">{{$value}}</a></li>
					{{else}}
					<li><a href="javascript:void(0);" onclick="findAll('{{$value}}')"  >{{$value}}</a></li>
					{{/if}}
					{{/each}}
					{{if data.hasNextPage}}
					<li><a href="javascript:void(0);" onclick="findAll('{{data.pageNum+1}}')"    ><span><i class="mdi mdi-chevron-right"></i></span></a></li>
					{{else}}
					<li class="disabled"><a href="javascript:void(0);"><span><i class="mdi mdi-chevron-right"></i></span></a></li>
					{{/if}}
				</ul>
			</nav>
			<!--分页结束-->
		</script>
	<script th:inline="javascript">

		let m = [[${goodsList}]];
		let name = [[${name}]];
		let categoryId = [[${categoryId}]];
		let html = template('all_novel', {data:m});
		//将渲染完成的数据挂载在页面上
		$('#novel_table').html(html);

		function findAll(pageNum) {
			var url = '/goods/search?';
			if (categoryId !== null && categoryId !== undefined && !isNaN(categoryId)) {
				url += 'categoryId=' + categoryId + '&';
			}
			if (name !== null && name !== undefined && typeof name === 'string') {
				url += 'name=' + name + '&';
			}
			url += 'currentPage=' + pageNum;
			/*var url = '/goods/search?categoryId=' + categoryId + '&currentPage=' + pageNum + '&name=' + name;*/
			window.location.href = url; // 这里直接设置浏览器的地址，进行页面跳转
		}
	</script>


	</body>
</html>
